import React from 'react';
import { Form ,Select, Input, Checkbox,DatePicker, Button } from 'antd';
import Utils from '../../utils/utils';

const FormItem = Form.Item;

class BaseForm extends React.Component{

    handleFilterSubmit = ()=>{
        let fieldsValue = this.props.form.getFieldsValue();
        this.props.filterSubmit(fieldsValue);
    }

    reset = ()=>{
        this.props.form.resetFields();
    }

    initFormList = ()=>{

        const { getFieldDecorator } = this.props.form;
        const formList = this.props.formList;
        const formItemList = [];
        if( formList && formList.length > 0 ){
            formList.forEach((item,i) => {
                let label = item.label;
                let field = item.field;
                let initValue = item.initialValue || '';
                let placeholder = item.placeholder;
                let width = item.width;
                if(item.type == '城市'){
                    const city = <FormItem label="城市" key={field} >
                        {
                            getFieldDecorator('city',{
                                initialValue:'0'
                            })(
                                <Select
                                    style={{width:80}}
                                    placeholder={placeholder}
                                >
                                    {Utils.getOptionList([{ id: '0', name: '全部' }, { id: '1', name: '北京' }, { id: '2', name: '上海' }, { id: '3', name: '天津' }, { id: '4', name: '杭州' }])}
                                </Select>
                            )
                        }
                    </FormItem>;
                    formItemList.push(city);
                } else if(item.type == 'INPUT'){
                    const textINPUT = <FormItem label={label} key={field} >
                        {
                            getFieldDecorator([field],{
                                initialValue:initValue
                            })(
                                <Input type="text" style={{ width:width }} placeholder={placeholder} />
                            )
                        }
                    </FormItem>
                    formItemList.push(textINPUT);
                } else if(item.type == 'SELECT') {
                    const SELECT = <FormItem label={label} key={field} >
                        {
                            getFieldDecorator([field],{
                                initialValue:initValue
                            })(
                                <Select
                                    style = {{ width:width }}
                                    placeholder = {placeholder}
                                >
                                    {Utils.getOptionList(item.list)}
                                </Select>
                            )
                        }
                    </FormItem>
                    formItemList.push(SELECT);
                } else if(item.type == 'CHECKBOX') {
                    const  CHECKBOX = <FormItem label={label} key={field} >
                        {
                            getFieldDecorator([field],{
                                initialValue:initValue
                            })(
                                <Checkbox>{label}</Checkbox>
                            )
                        }
                    </FormItem>
                    formItemList.push(CHECKBOX);
                } else if(item.type == 'DATE') {
                    const Date = <FormItem label={label} key={field}>
                        {
                            getFieldDecorator([field])(
                                <DatePicker showTime={true} placeholder={placeholder} />
                            )
                        }
                    </FormItem>;
                    formItemList.push(Date);
                }

            });
            return formItemList;
        }

    }

    render(){
        return (
            <Form layout="inline">
                { this.initFormList() }
                <FormItem>
                    <Button type="primary" style={{margin:'0 20px'}} onClick={this.handleFilterSubmit}>查询</Button>
                    <Button onClick={this.reset}>重置</Button>
                </FormItem>
            </Form>
        );
    }
}
export default Form.create({})(BaseForm);
